<template>
  <div class="wrapper" :style="wrapperObject">
    <div class="location">
      <p  @click="dialogVisible = true">{{weather?.city}}</p>
    </div>
    <div class="temperature" :style="temperature">
      <div class="number">
        <p :style="temperature">{{weather?.temperature}}</p>
      </div>
      <div class="fonts">
        <div class="font">
          <p>&#8451</p>
        </div>
        <div>{{weather?.weather}}</div>
      </div>
    </div>
    <div class="timer">
      <div :style="temperature">{{time}}</div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="选择地区（如呈贡区）"
        width="80%"
    >
      <el-input
          v-model="region"
          class="w-50 m-2"
          placeholder="Please Input"
          :suffix-icon="Search"
          @keyup.enter="getWeather"
      />
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="updateLocation">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup lang="ts">
import axios from "axios";
import {computed, onMounted, ref, shallowRef} from "vue";
import {Search} from '@element-plus/icons-vue'
import moment from "moment/moment";
import AMapLoader from '@amap/amap-jsapi-loader';
// 加个接口
onMounted(()=>{
  initLocation()
  getWeather()
})
const initLocation = () => {
  AMapLoader.load({
    "key": "e954952465db04a7445c8d3ce2b7cefd",           // 申请好的Web端开发者Key，首次调用 load 时必填
    "version": "1.4.15",                                // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    "plugins": [],                                      // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    "AMapUI": {                                         // 是否加载 AMapUI，缺省不加载
      "version": '1.1',                               // AMapUI 缺省 1.1
      "plugins":[],                                   // 需要加载的 AMapUI ui插件
    },
    "Loca":{                                            // 是否加载 Loca， 缺省不加载
      "version": '1.3.2'                              // Loca 版本，缺省 1.3.2
    },
  }).then((AMap)=>{
    AMap.plugin('AMap.CitySearch', function () {
      const citySearch = new AMap.CitySearch()
      citySearch.getLocalCity(function (status:any, result:any) {
        console.log(result)
        if (status === 'complete' && result.info === 'OK') {
          // 查询成功，result即为当前所在城市信息
          console.log(status)
        }
      })
    })
  })
}


const wrapperObject = computed(()=>{
  const hour = new Date(Date.now()).getHours()
  if (hour>7 && hour<=10){
    return {'background-image': 'url("/images/morning.jpg")'}
  }
  if (hour>10 && hour<=16 ){
    return {'background-image': 'url("/images/noon.jpg")'}
  }
  if (hour>=17 && hour<=19){
    return {'background-image': 'url("/images/afternoon.jpg")'}
  }
  if (hour>19 || (hour>=0 && hour<=7)){
    return {'background-image': 'url("/images/night.jpg")'}
  }
})
const temperature = computed(()=>{
  const hour = new Date(Date.now()).getHours()
  if (hour>7 && hour<=10){
    return {'color': 'white'}
  }
  if (hour>10 && hour<=16 ){
    return {'color': 'black'}
  }
  if (hour>=17 && hour<=19){
    return {'color': 'blue'}
  }
  if (hour>19 || (hour>=0 && hour<=7)){
    return {'color': 'white'}
  }
})
interface weatherInfo {
  city: string;
  temperature: string;
  weather: string;
}
const region = ref<string>('呈贡区')
const weather = ref<weatherInfo>()
const dialogVisible = ref<Boolean>(false)
const time = computed(()=>{
  const time = new Date(Date.now())
  const month = time.getMonth()
  const day = time.getDay()
  return month + '月' + day + '日'
})
const updateLocation =()=>{
  dialogVisible.value = false
  getWeather()
}
const getWeather = async ()=>{
  const res =await axios.get(`/geo?key=4287710fdfb27215fd5b52cf9dc49858&address=${region.value}`)
  const location = res.data.geocodes[0].location
  const res2 = await axios.get(`/regeo?key=4287710fdfb27215fd5b52cf9dc49858&location=${location}`)
  const adcode = res2.data.regeocode.addressComponent.adcode
  const res3 = await axios.get(`/weatherInfo?key=4287710fdfb27215fd5b52cf9dc49858&city=${adcode}`)
  res3.data.lives[0].reporttime = moment(res3.data.lives[0].reporttime, "YYYY-MM-DD")
  weather.value = res3.data.lives[0]
}
</script>
<style scoped lang="scss">
.wrapper {
  padding: 2rem;
  background-image: url("/images/morning.jpg");
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: start;
  background-size:100vw 100vh;
  .location {
    height: 18rem;
    display: flex;
    justify-content: left;
    align-items: center;
    p {
      color: white;
      font-weight: 300;
      font-size: 2rem;
    }
  }
  .temperature {
    height: 9rem;
    display: flex;
    align-items: center;
    .number {
      width: 5rem;
      p {
        color: black;
        font-size: 4rem;
        font-weight: normal;
      }
    }
    .fonts {
      width: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
    }
  }
  .timer {
    height: 4rem;
    display: flex;
    align-items: center;
  }
}
</style>